<template>
  <div>
    <tabbar></tabbar>
  <div class="imageUrl1">
      <img :src="imgurl" alt="" class="imageUrl">
  </div>
    <ul >
      <list  :datalist="datalist1" v-for="data in datalist1" :key="data.id" @click.native="handelclick(data.id)" :data='data'></list>
    </ul>
     <vueToTop></vueToTop>
  </div>

</template>
<script>

import tabbar from '@/components/tabbar'
import list from '@/components/list'
import axios from 'axios'


export default {
  data () {
    return {
      datalist: [],
      datalist1: [],
      loaddata: null,
      loadstatus: true,
      imgurl: null

    }
  },
  components: {
    tabbar, list
  },
  methods: {
    handelclick (id) {
      this.$router.push(`/c/${id}`)
    },
    onload () {
      var height =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight -
        document.documentElement.scrollHeight
      if (height >= -50 && this.loadstatus) {
        this.loadstatus = false
        this.loaddata += 20
        axios({
          url: `http://www.xiongmaoyouxuan.com/api/column/3183/items?start=${this.loaddata}`

        }).then(res => {
          // this.datalist = res.data.data;
          // console.log(this.datalist);
          // console.log(res.data.data.items.list)
          this.datalist1 = this.datalist1.concat(res.data.data.list)
          this.$nextTick(() => {
            this.loadstatus = true
          })
        })
      }
    }
  },
  mounted () {
    axios({
      url: 'http://www.xiongmaoyouxuan.com/api/column/3183/items?start=0'
    }).then(res => {
      this.datalist = res.data.data

      // console.log(res.data.data.items.list)
      this.datalist1 = res.data.data.list
    })
    window.addEventListener('scroll', this.onload)
    axios({
      url: 'http://www.xiongmaoyouxuan.com/api/column/3183'

    }).then(res => {
      this.imgurl = res.data.data.share.imageUrl
      console.log(this.imgurl)
    })
  },

  destroyed () {
    window.removeEventListener('scroll', this.onload)
  }
}

</script>
<style lang="scss" scoped>
  .imageUrl{
    width: 100%;
    height: 145px;
  }
  .imageUrl1{
    margin-top: 33px
  }
</style>
